<template>
  <el-drawer
      title="已选商品"
      v-model="drawerVisible"
      size="40%"
      direction="rtl">
    <div class="selected-items-container" v-if="selectedItems.length > 0">
      <div
          v-for="item in selectedItems"
          :key="item.cpid"
          class="selected-item"
      >
        <div class="item-info">
          <h4 class="item-name">{{ item.cpmc }}</h4>
          <p class="item-price">¥{{ item.cpjg }}</p>
        </div>
        <div class="quantity-control">
          <el-button
              :disabled="item.cpsl <= 0"
              @click="reduce(item)"
              circle
              size="small"
              icon="Minus"
          />
          <span class="quantity">{{ item.cpsl }}</span>
          <el-button
              @click="add(item)"
              circle
              size="small"
              icon="Plus"
          />
        </div>
      </div>

      <div class="cart-summary">
        <div class="summary-row">
          <span>商品总价</span>
          <span>¥{{ totalPrice }}</span>
        </div>
        <div class="summary-row">
          <span>配送费</span>
          <span>¥{{ deliveryFee }}</span>
        </div>
        <div class="summary-row total">
          <span>总计</span>
          <span>¥{{ totalPrice + deliveryFee }}</span>
        </div>
      </div>

      <div class="checkout-actions">
        <el-button type="primary" @click="goToCheckout" size="large" round>
          去结算
        </el-button>
      </div>
    </div>

    <div class="empty-cart" v-else>
      <el-icon class="empty-icon"><ShoppingCart /></el-icon>
      <p>购物车为空</p>
      <el-button @click="continueShopping" round>继续点餐</el-button>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'
import { ShoppingCart } from '@element-plus/icons-vue'

const drawerVisible = ref(false)
const selectedItems = ref([])
const deliveryFee = ref(0)

// 计算总价
const totalPrice = computed(() => {
  return selectedItems.value.reduce((total, item) => {
    return total + (item.cpjg * item.cpsl)
  }, 0)
})

// 操作方法
const reduce = (item) => {
  if (item.cpsl > 0) {
    item.cpsl--
  }
}

const add = (item) => {
  item.cpsl++
}

const goToCheckout = () => {
  // 去结算逻辑
}

const continueShopping = () => {
  drawerVisible.value = false
}

// 暴露给父组件的方法
defineExpose({
  show: () => {
    drawerVisible.value = true
  }
})
</script>

<style scoped>
.selected-items-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.selected-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.item-info {
  flex: 1;
}

.item-name {
  margin: 0 0 5px 0;
  font-weight: 500;
}

.item-price {
  margin: 0;
  color: #ff6b35;
  font-weight: 600;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quantity {
  min-width: 20px;
  text-align: center;
  font-weight: 500;
}

.cart-summary {
  margin-top: auto;
  padding: 20px 0;
  border-top: 1px solid #f0f0f0;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.summary-row.total {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.checkout-actions {
  padding: 20px 0;
  text-align: center;
}

.empty-cart {
  text-align: center;
  padding: 50px 20px;
  color: #999;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}
</style>
